<template>
  <div class="r">
    <div class="iconfont me">&#xe644;</div>
    <nav class="top"></nav>
    <div class="main">
      <div class="shang">
        <div class="name">热心市民李浩东</div>
        <div class="id">ID: 1069643013</div>
      </div>
      <div class="xia">
        <div class="first">
          <div>红包</div>
          <div class="second">218</div>
        </div>
        <div class="first">
          <div>优惠券</div>
          <div class="second">12张</div>
        </div>
        <div class="first">
          <div>仙豆</div>
          <div class="second">88</div>
        </div>
        <div class="first">
          <div>白条</div>
          <div class="second">1000</div>
        </div>
      </div>
    </div>
    <section class="message">
      <div class="money">
        <span class="iconfont a">&#xe665;</span> 我的钱包<span
          class="iconfont x"
          >&#xe775;</span
        >
      </div>
      <div class="address">
        <span class="iconfont b">&#xe64e;</span> 我的地址<span
          class="iconfont x"
          >&#xe775;</span
        >
      </div>
      <div class="help">
        <span class="iconfont c">&#xe61d;</span> 客服与帮助<span
          class="iconfont x"
          >&#xe775;</span
        >
      </div>
    </section>
    <img
      class="img"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb420e1ac-6042-4d62-adbd-490724e2cf3a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680699857&t=14ce9c8c4fb2faacd337345eff9825fe"
      alt=""
    />
    <tabBar />
  </div>
</template>

<script>
import tabBar from "../../components/tabbar/tabBar";
export default {
  name: "my",
  components: { tabBar },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixins.scss";
.message {
  width: 3.39rem;
  height: 1.46rem;
  background-color: #fff;
  margin: 0.16rem auto;
  font-size: .04rem;
  color: #262626;
}
.money,
.address,
.help {
  box-sizing: border-box;
  height: 0.38rem;
  padding-left: 0.16rem;
  padding-top: 0.16rem;
}
.address,
.help {
  margin-top: 0.06rem;
}
.x {
  color: #c2c4ca;
  float: right;
  margin-right: 0.16rem;
  font-size: 0.1rem;
}
.message .iconfont {
  font-size: 0.22rem;
  border-radius: 0.08rem;
  margin-right: 0.12rem;
}
.a {
  background: #ed4a47;
}
.b {
  background: #32c5ff;
}
.c {
  background: rgba(144, 19, 254, 0.92);
}
.me {
  position: absolute;
  font-size: 0.32rem;
  color: #fff;
  right: 0.21rem;
  top: 0.57rem;
}
.xia {
  display: flex;
  height: 0.76rem;
  width: 100%;
  padding-top: 0.12rem;
}
.xia .first {
  width: 25%;
  font-size: 0.12rem;
  color: #c1c0c9;
  text-align: center;
}
.second {
  font-size: .00rem;
  color: #262628;
  text-align: center;
}
.shang {
  height: 1.26rem;
  width: 100%;
  font-size: .04rem;
  color: #262628;
  letter-spacing: 0.019rem;
  text-align: center;
  line-height: 0.36rem;
  border-bottom:.01rem solid #f1f1f1;
}
.name {
  padding-top: 0.59rem;
}
.id {
  font-size: 0.14rem;
  color: #c1c0c9;
  text-align: center;
}
.r {
  background: #f5f5f5;
  margin: -0.08rem /* 8/10 */;
  height: 6.67rem;
}
.top {
  height: 2.5rem;
  background-size: 100% 1.59rem;
  background-image: linear-gradient(239deg, #3a6ff3 0%, #50c7fb 100%);
  border-radius: 0 0 30% 30%;
  background-repeat: repeat-y;
}
.img {
  position: absolute;
  width: 0.94rem;
  height: 0.94rem;
  top: 0.62rem;
  left: 1.41rem;
  z-index: 99;
  border-radius: 50%;
}
.main {
  margin: -1.42rem auto 0 auto;
  height: 2.03rem;
  width: 3.39rem;
  background: white;
  z-index: 9;
  background: #ffffff;
  box-shadow: 0.08rem .06rem 0 rgba(0, 0, 0, 0.08);
  border-radius:.08rem;
}
</style>